<template>
    <el-card style="margin-bottom: 20px" shadow="hover">
        <el-row :gutter="30">
            <el-col :span="6">
                <el-form-item label="角色名称">
                    <el-input v-model="queryForm.cn_name" placeholder="请输入角色名称" clearable />
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="角色标识">
                    <el-input v-model="queryForm.name" placeholder="请输入角色标识" clearable />
                </el-form-item>
            </el-col>
            <!-- <el-col :span="6">
                <el-form-item label="状态">
                    <el-select v-model="queryForm.status" placeholder="请选择" clearable>
                        <el-option :key="1" :value="1" label="正常" />
                        <el-option :key="2" :value="2" label="禁用" />
                    </el-select>
                </el-form-item>
            </el-col> -->
            <el-col :span="24">
                <div style="display: flex; justify-content: space-between">
                    <div>
                        <el-button type="primary" @click="handleQuery">
                            <el-icon :size="14"> <Search /> </el-icon>
                            <span>查询</span>
                        </el-button>
                        <el-button type="primary" text bg @click="resetQuery">
                            <span>重置</span>
                        </el-button>
                    </div>
                    <el-button type="primary" @click="handleCreate">
                        <el-icon class="el-icon--left" :size="16"> <CirclePlusFilled /> </el-icon>
                        <span>新增</span>
                    </el-button>
                </div>
            </el-col>
        </el-row>
    </el-card>
</template>

<script setup lang="ts">
    const emits = defineEmits(['query', 'create'])
    const queryForm = defineModel<Record<string, any>>({ default: {} })
    /**
     * 处理查询
     */
    const handleQuery = () => {
        emits('query')
    }
    /**
     * 重置查询条件
     */
    const resetQuery = () => {
        for (const key in queryForm.value) {
            queryForm.value[key] = ''
        }
    }
    /**
     * 处理新增事件
     */
    const handleCreate = () => {
        emits('create')
    }
</script>
